<template>
    <div class="ep-table-list">
        <table class="ep-table">
            <tr class="ep-table-header" align="center">
                <th v-for="(item,index) in tableHeader" :key="index">{{item}}</th>
            </tr>
            <tr align="center" v-for="(item,index) in tableList" :key="index" v-if="type == 'normal'">
                <td class="col-hui" v-for="(el,i) in rowName" :key="i">{{item[el]}}</td>
            </tr>
            <tr align="center" v-for="(item,index) in tableList" :key="index" v-if="type == 'prop'">
                <slot :row="item"></slot>
            </tr>
        </table>
    </div>
</template>

<script type="es6">
    export default {
        props: {
            type: {
                type: String,
                default:'normal'
            },
            tableHeader: {
                type: Array,
                default:() => []
            },
            rowName: {
                type: Array,
                default:() => []
            },
            dataType: {
                type: String,
                default:'company'
            }
        },
        data() {
            return {
                tableList:[]
            }
        },
        computed: {
            panel() {
                return this.$store.getters.common && this.$store.getters.common.panel || {};
            }
        },
        watch: {
            panel: {
                handler(value) {
                    if (this.dataType == "company") {
                        this.tableList = value.cpInsure || [];
                    } else if (this.dataType == "person") {
                        this.tableList = value.psInsure || [];
                    }
                }
            }
        },
        created() {
        },
        methods: {

        }
    }
</script>

<style lang="less" scoped>
    .ep-table-list{
        margin-left: 10px;
        display: flex;
       background: #fff;
        .ep-table{
            border-spacing: 0;
            background: #fff;
            .ep-table-header{
                background: #fafafa;
                th{
                    color:#606266;
                    padding:10px 10px;
                    border-bottom: 1px solid #efefef;
                    border-top: 1px solid #efefef;
                }
            }
            tr{
                margin-bottom:10px;
                td{
                    padding: 10px 10px;
                    border-bottom: 1px solid #efefef;
                }
            }

        }
    }

</style>
